<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>153_通过属性读取样式</title>

		<style>
			#box1 {
				width: 200px;
				height: 200px;
				border: 10px red solid;
				margin: 50px;
				padding: 50px;
				background-color: aqua;
			}
		</style>
	</head>
	<body>
		<button id="btn">点我一下</button>
		<div id="box1"></div>

		<script>
			/* 
			元素.clientHeight
			元素.clientwidth
				-获取元素内部的宽度和高度(包括内容区和内边距),返回数值，不带单位，可以直接参与计算
				
			元素.offsetHeight
			元素.offsetwidth
				-获取元素的可见框的大小(包括内容区 内边距和边框）
			
			元素.scrollHeight元素.scrollwidth
				-获取元素滚动区域的大小
				
			元素.offsetParent
				-获取元素的定位父元素
				-定位父元素:离当前元素最近的开启了定位的祖先元素，
				-如果所有的元素都没有开启定位则返回body
			
			元素.offsetTop元素.offsetLeft
				-获取元素相对于其定位父元素的偏移量
				
			元素.scrollTop元素.scrollLeft
				-获取或设置元素滚动条的偏移量
			*/

			btn.onclick = function() {
				console.log(box1.clientHeight); //300
				console.log(box1.offsetWidth); //320
			}
		</script>
	</body>
</html>